<template>
    <div>

        <div class="dtop">

            <div class="header">
                <router-link to>
                    <van-icon @click="$router.back(-1)" name="arrow-left" size="30" color="gray"/>
                </router-link>
                <div>
                    <p style="font-size:20px;">歌单</p>
                </div>
                <router-link to="/search">
                    <van-icon name="search" size="30" color="gray"/>
                </router-link>
            </div>

            <!-- <van-cell> -->
            <div class="top">
                <van-image class="imagemargin" width="125px" :src="playlist.coverImgUrl" />
                <div class="topname">
                    <span class="topn">{{playlist.name}}</span>
                    <div class="vflex">
                        <van-image round fit="cover" width="30px" height="30px" :src="playlist.creator!= null?playlist.creator.avatarUrl:''"/>
                        <span style="margin:3%">{{playlist.creator!= null?playlist.creator.nickname:''}}</span>
                    </div>
                </div>
            </div>
            <!-- </van-cell> -->
        </div>

        <div class="title">
            <span @click="addSongList">播放全部</span>
        </div>
        <van-divider class="margin"/>

        <div>
            <!-- <van-cell @click="$router.push({name:'music',params:{id:item.id, name:item.name, pic:item.picUrl}})" style="text-align:left;" v-for="(item,index) in songlists" :key="index"> -->
              <div @click="addSong(item)" class="index" :key="index" v-for="(item,index) in playlist.tracks">
                <van-image class="dimagemargin" width="60px" :src="item.al.picUrl" />
                <div class="indexname">
                    <span class="amz">
                        <span class="song">{{item.al.name.slice(0,25)}} </span>
                        <div style="margin:2px"></div>
                        <span class="singer">- {{item.ar[0].name}}</span>
                    </span>
                    <!-- <van-icon name="more-o" size="30" color="gray"/> -->
                </div>
              </div> 
            <!-- </van-cell> -->
        </div>

    </div>
</template>

<script>
import List from '@/api/index'
export default {
  data(){
    return{
      playlist:{}
    }
  },
  mounted(){
    let _this = this;
    List.getPlayListDetail(this.$route.params.id).then(function(res){
       _this.playlist = res.data.playlist;
       console.log(_this.playlist)
    })
  },
  methods:{
    addSongList(){
        let list = [];
        for(let i=0; i<this.playlist.tracks.length; i++){
            list.push({
                id: this.playlist.tracks[i].id,
                name: this.playlist.tracks[i].al.name,
                pic: this.playlist.tracks[i].al.picUrl,
            });
        }
        this.$store.commit('setSongList',list);
        this.$store.commit('setSongCur', 0);
    },
    addSong(item){
      this.$store.commit('pushSongList',{id:item.id, name:item.al.name, pic:item.al.picUrl});
      this.$router.push('/music3');
            
    }
  }
}
</script>

<style scoped>
.dtop{
  /* background: #ddd; */
}
.top{
  /* border: 1px solid #000; */
  display:flex;
  margin: 5% 0;
}
.topname{
  /* border: 1px solid #000; */
  display:flex;
  flex-direction:column;
  justify-content:space-evenly;
  width: 200px;

}
.imagemargin{
  margin-left: 33px;
  margin-right: 25px;
  /* border: 1px solid #000; */
}
.vflex{
  display: flex;
  flex-direction:row;
  align-items: center;
  /* border: 1px solid #000; */
}
.topn{ 
  height: 40%;
  width: 85%;
  font-size: 20px;
  font-size:18px;
  margin-bottom: 5%;
  /* border: 1px solid #000; */
}
.margin{
  margin-left: 25px;
  margin-right: 25px;
  margin-bottom: 5%;
}
.title{ 
  height:40px; 
  line-height:75px; 
  display:flex;
  justify-content:space-between
}
.title span{
  margin-left: 25px;
  font-size: 18px;
}
.index{
  /* border: 1px solid #000; */
  display:flex;
  margin-right: 7%;
  margin-left: 7%;
  margin-bottom: 5%;
}
.indexname{
  /* border: 1px solid #000; */
  width: 100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.song{
  font-size: 16px;
}
.singer{
  font-size: 12px;
  color: gray;
}
.dimagemargin{
  margin-left: 5px;
  margin-right: 25px;
}
.amz{
  display:flex;
  flex-direction: column;
}
.header{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin: 3% 5%;
}
</style>